<template>
  <div class="form">
    <sx-common-form-base id="f1" :data="data" :form="form" :isValidateInit="false">
 
    </sx-common-form-base>
  </div>
</template>

<script>
import SxCommonFormBase from 'sx-common-form-base'
import 'sx-common-form-base/theme-default/lib/index.css'
  export default {
    components: {
      SxCommonFormBase,
    },
    data() {
      return {
        data:[
          {
            label: "输入框：",
            prop: "name1",
            controlType: "input",
            rulesText: "text",
            rules:[{
              required: true,
              pattern: /^[1-9]\d*$/,
              message: "请输入非负整数",
              trigger: "change",
            }],
            isMust: true,
          },
          {
            label: "下拉框：",
            prop: "name2",
            controlType: "select",
            isMust: true,
            options: [
              { label: "选项一", value: "选项一" },
              { label: "选项二", value: "选项二" },
            ],
            rulesText: "text",
          },
          {
            label: "日期：",
            prop: "name3",
            controlType: "date",
            rulesText: "text",
            isMust: true,
            dateType: "date",
            format: "yyyy-MM-dd",
          },
          {
            label: "时间：",
            prop: "name4",
            controlType: "date",
            rulesText: "text",
            isMust: true,
            dateType: "datetime",
            placeholder: "请选择时间",
            format: "yyyy-MM-dd HH:ss:mm"
          },
          {
            label: "禁用：",
            prop: "name5",
            disabled:true,
            controlType: "input",
            isMust: false
          },
          {
            label: "提示语：",
            span: 24,
            prop: "name6",
            controlType: "input",
            isMust: false,
            rulesText: "text",
            tip: "这是提示语哈~",
            tipIcon: "question",
          },
          {
            label: "富文本：",
            span: 24,
            controlType: "slot",
            isMust: true,
            rulesText: "text"
          }
        ],
        form:{
          name1:'',
          name2:"",
          name3:"",
          name4:"",
          name5:"",
          name6:"",
          rich:"",
          file:[]
        },
      }
    },
  }
</script>

<style lang="scss" scoped>
.form{
  background: #fff;
  padding: 0.3rem 0 0;
}
</style>